<template>
  <div>
    <el-card class="box-card" style="width: 100%; height: 15%">
      <el-form
        @submit.native.prevent
        @keyup.enter.native="handleSerach()"
        :inline="true"
        class="demo-form-inline"
      >
        <el-form-item label="订单信息">
          <el-input v-model="keyword" placeholder="订单信息"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSerach()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="id" width="60">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易金额" width="90">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.payMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属分类" width="90">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fromGoodsCategory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="90">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="90">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="90">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.paymentType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" width="180">
        <template slot-scope="scope">
          <el-switch
            active-text="已支付"
            inactive-text="未支付"
            v-model="scope.row.isActived"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            disabled
          >
          </el-switch>
          </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        background
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import { GetOms } from "../api/omsList";

export default {
  data() {
    return {
      //数据表格的数据元
      tableData: [],

      //搜索框绑定的信息
      keyword: "",
      //分页
      pager: {
        pageIndex: 1, // 页码
        pageSize: 10, // 页面大小（每页项目的数量）
        rowsTotal: 30, // 总记录数
      },
    };
  },
  methods: {
 
    //模糊查询用户
    handleSerach() {
      this.fetchData();
    },

    // 改变页码后，重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 改变页大小后，重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },

    // 拉取数据方法
    fetchData() {
      let params = {
        keyword: this.keyword,
        pager: this.pager,
      };
      console.log(params);
      GetOms(params)
        .then(({ data }) => {
          let res = data.data;
          this.tableData = res.data;
          this.pager = res.pager;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // 拉取数据
    this.fetchData(this.pager);
  },
};
</script>

<style>
.element.style {
  margin-left: 0px;
}

.el-dialog__footer {
  margin-right: 100px;
}

.el-dialog__body {
  align-content: center;
  justify-content: center;
  display: flex;
}
</style>